<template>
  <canvas id="cab"></canvas>
  <div class="bot">
    <input type="color" name="" id="" v-model="color">
    <input type="number" name="" id="" value="1" v-model="size">4
    <input type="button" @click="xpc" value="橡皮擦">
  </div>
</template>

<script setup>
import { ref, onMounted, } from 'vue'
const color = ref("#000")
const size = ref(1)
onMounted(() => {
  const can = document.getElementById("cab")
  console.log(can);

  const canvas = can.getContext("2d")
  const canRect = can.getBoundingClientRect()
  let canOffsetX = canRect.left
  let canOffsetY = canRect.top
  can.width = window.innerWidth - 4
  can.height = window.innerHeight - 4

  var isDrawing, points = [];
  window.addEventListener("resize", () => {
    can.width = window.innerWidth
    can.height = window.innerHeight
  })
  const isPainting = ref(false)
  can.addEventListener("mousedown", (e) => {
    // 画下一个点

    isPainting.value = true
    points.push({ x: e.clientX, y: e.clientY });
    canvas.beginPath()
  })
  can.addEventListener("mouseup", (e) => {
    isPainting.value = false
    points.length = 0
  })
  can.addEventListener("mousemove", (e) => {
    if (isPainting.value) {
      canvas.strokeStyle = color.value
      canvas.lineWidth = size.value
      canvas.lineCap = "round"
      // 拐角
      canvas.lineJoin = "round"
      // 阴影
      canvas.shadowBlur = 2
      canvas.shadowColor = color.value
      /* canvas.lineTo(e.clientX - canOffsetX, e.clientY - canOffsetY)
      canvas.stroke() */


      canvas.clearRect(0, 0, canvas.width, canvas.height);
      points.push({ x: e.clientX, y: e.clientY });

      canvas.beginPath();
      canvas.moveTo(points[0].x, points[0].y);
      for (var i = 1; i < points.length; i++) {
        canvas.lineTo(points[i].x, points[i].y);
      }
      canvas.stroke();
    }
  })


})

const xpc = () => {
  // 切换到擦除模式
}




</script>

<style scoped>
canvas {
  background: #ffffff00;
}

.bot {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 300px;
  height: 100px;
  background-color: #8b8b8b;
}
</style>